<template>
<div>
  <el-container>
    <el-aside>
      <el-menu router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none">
        <el-menu-item index="/personHome">
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/shopping">
          <span slot="title">我的购物车</span>
        </el-menu-item>
        <el-menu-item index="/password">
          <span slot="title">修改密码</span>
        </el-menu-item>
        <el-menu-item index="/personChange">
          <span slot="title">修改个人信息</span>
        </el-menu-item>
      </el-menu>

    </el-aside>

    <el-container>
  <el-header>
    <el-row style="margin-top:30px; height: 100px;text-align: center;">
      <el-col :span="6" style="height: 60px">
        <el-link :underline="false" href="/home" style="font-size: 35px;color: orange;">书籍交易平台主页</el-link>
      </el-col>
      <el-col :span="18">
        <div style="height: 60px; display: flex; justify-content: flex-end;">
          <input type="text" v-model="SearchText" placeholder="请输入搜索商品名称" class="el-header-input"/>
          <button type="button" @click="handleSearch" class="el-header-button">搜索</button>
        </div>
      </el-col>
    </el-row>
  </el-header>


  <el-main>
    <router-view></router-view>
  </el-main>

    </el-container>
  </el-container>
</div>
</template>

<script >
export default {
  name: 'Person',
  data(){
    return {
      SearchText: '',
    }
  },
  methods: {
    handleSearch() {
      // 在这里编写搜索逻辑，比如发送请求获取搜索结果
      console.log('正在搜索：' + this.SearchText + '，分类：' + this.category);
    }
  },
  mounted() {
    document.body.style.overflow = "hidden";
  }
}

</script>


<style scoped>
.el-menu-item:hover,.el-submenu__title:hover {
  color: #fff!important;
}
.el-submenu__title:hover i {
  color: #fff!important;
}
.el-menu-item:hover i {
  color: #fff!important;
}
.el-menu-item.is-active {
  background-color: #1890ff!important;
  border-radius: 5px!important;
  width: calc(100% - 8px);
  margin-left: 4px;
}
.el-menu-item.is-active i,.el-menu-item.is-active.el-tooltip{
  margin-left: -4px;
}
.el-menu-item {
  height: 100px!important;
  line-height: 100px!important;
  text-align: center;
  font-size: 30px;
}
.el-submenu__title {
  height: 40px!important;
  line-height: 40px!important;
}
.el-aside {
  min-height: 100vh;
  background-color: #001529;
  width: 300px;
  transition: width.3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41,.35);
}
.el-header{
  height: 100px!important;
}
.el-header-input{
  width: 75%;
  border-radius: 10px;
  border:2px solid orange;
  font-size: 20px
}
.el-header-button{
   width: 100px;
   font-size: 20px;
   border-radius: 10px;
   border: 2px solid orange
 }

</style>